<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>SSE 测试页面</title>
      <style>
        body {
          font-family: 'Segoe UI', Arial, sans-serif;
          max-width: 800px;
          margin: 2rem auto;
          padding: 20px;
          background-color: #f5f5f5;
        }

        #container {
          background: white;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          padding: 20px;
        }

        #messages {
          height: 300px;
          overflow-y: auto;
          border: 1px solid #ddd;
          padding: 15px;
          margin: 15px 0;
          background: #fafafa;
          border-radius: 4px;
        }

        .message {
          padding: 8px 12px;
          margin: 5px 0;
          background: #e3f2fd;
          border-left: 4px solid #2196f3;
          border-radius: 3px;
        }

        button {
          background: #2196f3;
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 4px;
          cursor: pointer;
          transition: background 0.3s;
        }

        button:hover {
          background: #1976d2;
        }

        .status {
          color: #666;
          font-size: 0.9em;
          margin-top: 10px;
        }
      </style>
    </head>

    <body>
      <div id="container">
        <h2>SSE 实时数据测试</h2>
        <div id="messages"></div>
        <img src="" alt="" />
        <button onclick="toggleConnection()">关闭连接</button>
        <div id="status" class="status">状态：未连接</div>
      </div>

      <script>
        let eventSource;
        const messagesDiv = document.getElementById('messages');
        const statusDiv = document.getElementById('status');

        // 创建 SSE 连接
        function connectSSE() {
          eventSource = new EventSource(
            `http://192.168.0.86:8055/sse00?clientId=888`,
          );

          eventSource.onopen = () => {
            statusDiv.textContent = '状态：已连接';
            addMessage('系统：成功连接到 SSE 服务');
          };

          eventSource.onmessage = (event) => {
            console.log(event.data);
            addMessage(`数据: ${event.data}`);
          };

          eventSource.addEventListener('image', function (event) {
            const img = document.createElement('img');
            img.src = event.data; // 设置图片的 src 为 Base64 编码的字符串
            messagesDiv.appendChild(img); // 将图片添加到页面中
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
          });

          eventSource.onerror = (error) => {
            statusDiv.textContent = '状态：连接错误';
            addMessage('系统：连接发生错误', 'error');
            console.error('SSE Error:', error);
          };
        }

        // 添加消息到显示区域
        function addMessage(text, type = 'info') {
          const message = document.createElement('div');
          message.className = `message ${type}`;
          message.innerHTML = `
                <span style="color: #666">[${new Date().toLocaleTimeString()}]</span>
                ${text}
            `;
          messagesDiv.appendChild(message);
          messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }

        // 切换连接状态
        function toggleConnection() {
          if (eventSource) {
            eventSource.close();
            statusDiv.textContent = '状态：已断开';
            addMessage('系统：手动关闭连接');
            eventSource = null;
          } else {
            connectSSE();
          }
        }

        // 初始化连接
        connectSSE();
      </script>
    </body>
  </html>
</html>
